<template>
    <div class="box_cont flex" v-loading="loading">
        <div class="title_cont">
            <div class="right">
                <div class="select_cont">
                    <img class="back_img cur" @click="backFn" src="@/assets/img/back.png" />
                    <el-select v-model="chooseCourse" placeholder="请选择词库" @change="changeCourse" :popper-append-to-body="false">
                        <el-option
                        v-for="item in courseData"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <h2>上课</h2>
            <div></div>

        </div>

        <round :list="boxWordCount" @learn="goLearn(0)" @circle="goLearn" style="flex-shrink: 0" />

        <div class="attend_text">
            今日识词 <span class="num" style="margin-right:50px;">{{ todayWordsNum }}</span>
            今日待复习 <span class="num" style="margin-right:50px;">{{ todayReviewNum }}</span>
            累计识词 <span class="num">{{ totalWordsNum }}</span>
        </div>

        <div class="attend_btn">
            <el-button style="width: 208px" type="warning" @click="reviewFun">开始复习</el-button>
            <el-button style="width: 208px" type="primary" @click="continueLearn">继续学习</el-button>
        </div>
    </div>
</template>

<script>

import round from './components/round.vue'
import { courseList } from '@/api/course.js'
import { learnDetail, changeLearnCourse } from '@/api/learn.js'
import { getCourseWordCount, getWordsNum } from '@/api/statistics.js'

export default {
    components:{ round },
    data() {
        return {
            loading: false,
            learnId: 0,
            userId: 0,
            isLearn: 0, //0: 教练教学练习  1：学生上课
            courseData: [],
            learnInfo: {},
            chooseCourse: '',
            boxWordCount: [],
            todayWordsNum: 0,
            totalWordsNum: 0,
            todayReviewNum: 0,
            category: 1
        }
    },
    mounted(){
        this.learnId = this.$route.query.learnId
        this.category = this.$route.query.category
        this.getLearnInfo()
    },
    methods:{
        getLearnInfo() {
            this.loading = true
            learnDetail({id: this.learnId}).then(res => {
                this.loading = false
                this.learnInfo = res.data
                this.chooseCourse = this.learnInfo.course ? this.learnInfo.course.id : ''
                this.userId = this.learnInfo.user ? this.learnInfo.user.id : 0
                this.getCourseList()
                this.getCourseWordCount()
                this.getWordsNum()
            })
        },
        getCourseList() {
            let param = {}
            if (this.learnInfo.learnType == 2 || this.learnInfo.courseType.value == 4) {
                param.isTrial = 1
            }else {
                param.userId = this.userId
            }
            param.categoryId = this.category
            this.loading = true
            courseList(param).then(res => {
                this.loading = false
                this.courseData = res.data
            })
        },
        getCourseWordCount() {
            getCourseWordCount({courseId: this.chooseCourse, userId: this.userId}).then(res => {
                if (res.error == 0) {
                    let boxWordCount = []
                    let todayReviewNum = 0
                  
                    res.data.forEach(item => {
                        boxWordCount[item.box - 1] = item.totalWords
                    })

                    for (let i = 0; i <= 7; i++) {
                        if (!boxWordCount[i]) {
                            boxWordCount[i] = 0
                        }
                        if (i <= 6) {
                            todayReviewNum += boxWordCount[i]
                        }
                    }

                    this.boxWordCount = boxWordCount
                    this.todayReviewNum = todayReviewNum
                    this.totalWordsNum = boxWordCount[7]
                }
            })
        },
        // 修改学习课程
        changeCourse(course) {
            this.loading = true
            changeLearnCourse({id: this.learnId, courseId: course, userId: this.userId}).then(res => {
                this.loading = false
                if (res.error == 0) {
                    this.getCourseWordCount()
                    this.getWordsNum()
                }
            })
        },
        goLearn(box) {
            let boxWordCount = this.boxWordCount[box - 1] || 0
            if (box > 0 && boxWordCount == 0) {
                return false
            }
            this.$router.push({path: '/work/test', query: {box: box, learnId: this.learnId, category: this.category}})
        },
        getWordsNum() {
            getWordsNum({courseId: this.chooseCourse, userId: this.userId}).then(res => {
                if (res.error == 0) {
                    this.todayWordsNum = res.data.today
                }
            })
        },
        continueLearn(){
            this.$router.push({path: '/work/test', query: {box: 0, learnId: this.learnId, category: this.category}})
        },
        reviewFun(){
            if (this.todayReviewNum == 0) {
                this.$message.error({ el: this.bearRef.$el, message: '今日没有需要复习的单词' });
                return false
            }
            this.$router.push({path: '/work/test', query: {box: 9, learnId: this.learnId, category: this.category}})
        },
        backFn(){
            this.$router.push({path: '/work/studytype', query: {learnId: this.learnId, userId: this.userId, category: this.category}})
        }
    }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";

.box_cont{
    // padding: 20px 0;
    overflow-y: auto;
    &::-webkit-scrollbar {
        width: 0px;
        height: 1px;
    }

    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}
::v-deep .el-input__inner{
    border: 1px solid #fff;
    background: #fff;
}
::v-deep .el-select .el-input.is-focus .el-input__inner{
    border: 1px solid #fff;
}
::v-deep .el-select-dropdown__item{
    border-bottom: 1px solid #F0F2F4;
    // padding: 2rem 0;
    &:last-child{
        border-bottom:none ;
    }
}
.title_cont{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content:space-between;
    padding: 20px 32px 0;
    text-align: center;
    color: #fff;
    h2{
        font-size: 3.2rem;
        font-weight: normal;
        display: inline-block;
    }
    .right{
        width: 0;
        position: relative;
        
        .select_cont{
            position: absolute;
            width: 300px;
            top: -18px;
            left: 0px;
            text-align: left;
            display: flex;
            align-items: center;
        }
    }
}
.attend_cont{
    width: 420.89px;
    height: 383.01px;
    // background-image: url(@/assets/img/bj_3.png);
    background-size: 100% 100%;
    margin: auto;
    margin-top: 60px;
    position: relative;
    .center{
        position: absolute;
        top: 53%;
        left: 50%;
        transform: translate(-50%,-50%);
        color: #fff;
        font-size: 36px;
    }
    .value{
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: #fff;
        font-size: 36px;
        line-height: 54px;
        text-align: center;
        position: absolute;
    }
    .num1{
        bottom: 50px;
        left: 60px;
        color:$background-red;
    }
    .num2{
        bottom: 150px;
        left: 20px;
        color:$color2;
    }
    .num3{
        bottom: 247px;
        left: 59px;
        color:$color3;
    }
    .num4{
        top: 26px;
        left: 145px;
        color:$color4;
    }
    .num5{
        top: 34px;
        left: 246px;
        color:$color5;
    }
    .num6{
        top: 100px;
        right: 48px;
        color:$color6;
    }
    .num7{
        top: 200px;
        right: 20px;
        color:$color7;
    }
    .num8{
        bottom: 40px;
        right: 70px;
        color:$color8;
    }
}
.attend_text{
    margin: 0 auto;
    font-size: 1.8rem;
    font-weight: 400;
    text-align: center;
    margin-bottom: 1rem;
    color: #fff;
    .num{
        font-weight: bold;
    }
}
.attend_btn{
    width: 100%;
    text-align: center;
    padding: 2.4rem 0;
    //border-top: 2px solid #4762BB;
}
.back_img{
    width: 4rem;
    height: 4rem;
    margin-right: 1rem;
    &:hover{
        content: url(@/assets/img/back_1.png);
    }
}
</style>
